<!---
  @author: HuangMingSheng
  @description: 面板标题组件
-->
<template>
  <div
    :class="[
      'ms-panel-title',
      {
        'ms-panel-title--reverse': reverse,
      },
    ]"
    :style="titleStyle"
  >
    <div class="ms-panel-title__left">
      <span class="ms-panel-title__text">{{ title }}</span>
    </div>
    <div class="ms-panel-title__right">
      <slot name="content"></slot>
    </div>
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
interface Props {
  /** 面板标题组件标题文本 */
  title?: string;
  /** 面板标题组件是否反转 */
  reverse?: boolean;
  /** 面板标题组件的背景,支持16进制颜色,rgba,rgb,渐变色,背景图片 */
  background?: string;
}

const props = withDefaults(defineProps<Props>(), {
  title: "",
  reverse: false,
  background: "",
});

const titleStyle = computed(() => {
  const style: Record<string, string> = {};

  if (props.background) {
    // 判断是否为图片路径
    if (
      props.background.includes("url") ||
      props.background.includes(".png") ||
      props.background.includes(".jpg") ||
      props.background.includes(".jpeg") ||
      props.background.includes(".gif") ||
      props.background.includes(".svg")
    ) {
      style.backgroundImage = `url(${props.background})`;
      style.backgroundSize = "cover";
      style.backgroundPosition = "center";
      style.backgroundRepeat = "no-repeat";
    } else {
      style.backgroundColor = props.background;
    }
  }

  return style;
});

defineOptions({
  name: "MsPanelTitle",
});
</script>

<style lang="less" scoped>
@import "./panel.less";
</style>
